import React, { useState } from 'react';
import { Card, Spin, Alert, Typography } from 'antd';
import ImageUploader from '../components/ImageUploader';
import LightAnalysisReport from '../components/LightAnalysisReport';

import LightingSuggestionDisplay from '../components/LightingSuggestionDisplay';

const { Title } = Typography;

const LightAnalysisPage = () => {
  const [loading, setLoading] = useState(false);
  const [analysisResult, setAnalysisResult] = useState(null);
  const [error, setError] = useState(null);

  const handleAnalysisComplete = (result) => {
    setLoading(false);
    if (result.error) {
      setError(result.error);
      return;
    }
    setAnalysisResult(result);
    setError(null);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1000px', margin: '0 auto' }}>
      <Card title="光线分析工具" className="analysis-card">
        <Spin spinning={loading} tip="正在分析中...">
          <div className="upload-section">
            <ImageUploader onAnalysisComplete={handleAnalysisComplete} />
          </div>
          
          {error && (
            <Alert
              message="分析错误"
              description={error}
              type="error"
              showIcon
              style={{ marginTop: '20px' }}
            />
          )}

          

          {analysisResult && (
            <>
              <div className="analysis-result" style={{ marginTop: '20px', border: '1px solid #eee', padding: '20px', borderRadius: '4px' }}>
                <LightAnalysisReport analysisResult={analysisResult} />
              </div>
              <div className="suggestion-result" style={{ marginTop: '20px', border: '1px solid #eee', padding: '20px', borderRadius: '4px' }}>
                <LightingSuggestionDisplay suggestions={analysisResult.suggestions} />
              </div>
            </>
          )}
        </Spin>
      </Card>
    </div>
  );
};

export default LightAnalysisPage;